<title>我的订单</title>
{% extends 'base.html' %}
{% block content %}
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">成功</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>订单删除成功</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="location.reload()">
                        关闭
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <br>
            {% if products|length == 0 %}
                <br>
                <div class="row">
                    <div class="col-sm-12" align="center">
                        <h4 id="slogan">
                            您目前还没有订单哦，请转到
                            <a href="{% url 'store:shoppingcart' username=user.username %}">购物车</a>
                            购买
                        </h4>
                    </div>
                </div>
            {% endif %}
            {% for i in products %}
                <br>
                <div class="row">
                    <div class="col-sm-12" align="center">
                        <a class="btn btn-dark" data-toggle="collapse" href="#collapseExample{{ forloop.counter }}"
                           role="button" aria-expanded="false" aria-controls="collapseExample">
                            订单{{ forloop.counter }}
                        </a>
                    </div>
                </div>
                <div class="collapse" id="collapseExample{{ forloop.counter }}">
                    <div class="card card-body">
                        <br>
                        <div>
                            <h5 id="summary-font">
                                订单详情
                                <a class="fa fa-close fa-2x"
                                   href="{% url "store:remove_order" order_id=forloop.counter0 username=user.username %}"
                                   style="float: right" onclick="delete_order()"></a>
                            </h5>
                        </div>
                        <hr id="summary">
                        <div class="row">
                            <div class="col-sm-6">
                                <h6 id="summary-font">商品名称</h6>
                            </div>
                            <div class="col-sm-3">
                                <h6 id="summary-font">商品数量</h6>
                            </div>
                            <div class="col-sm-3">
                                <h6 id="summary-font">商品价格</h6>
                            </div>
                        </div>
                        {% for j in i %}
                            <div class="row">
                                <div class="col-sm-6">
                                    <h6 id="summary-font">{{ j.product.p_name }}</h6>
                                </div>
                                <div class="col-sm-3">
                                    <h6 id="summary-font">{{ j.quantity }}</h6>
                                </div>
                                <div class="col-sm-3">
                                    <h6 id="summary-font">{{ j.product.p_price }}</h6>
                                </div>
                            </div>
                            <br>
                        {% endfor %}
                        <div class="row">
                            <div class="col-sm-12">
                                <h6 id="summary-font" style="float: right">总计：
                                    {{ order_total.pop }}元
                                </h6>
                            </div>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
    <script>
        function delete_order() {
            $(document).ready(function () {
                $("#myModal").modal();
            });
        }
    </script>
{% endblock %}